<template>
  <div>
    <div style="margin: 20px 0;">
      <el-button type="primary" @click="addDistributor">添加车辆</el-button>
    </div>

    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column label="序号" width="55" align="center">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column label="车牌号" align="center">
      </el-table-column>
      <el-table-column prop="name" label="所属配送商" align="center">
      </el-table-column>
      <el-table-column prop="address" label="厂家" show-overflow-tooltip align="center">
      </el-table-column>
      <el-table-column prop="value" label="型号" align="center">
      </el-table-column>
       <el-table-column prop="value" label="车厢容量（m³）" align="center">
      </el-table-column>
        <el-table-column prop="value" label="车辆载重（T）" align="center">
      </el-table-column>
        <el-table-column prop="value" label="车辆照片" align="center">
      </el-table-column>
        <el-table-column prop="value" label="司机姓名" align="center">
      </el-table-column>
        <el-table-column prop="value" label="联系方式" align="center">
      </el-table-column>
       <el-table-column prop="value" label="GPS设备编码" align="center">
      </el-table-column>
       <el-table-column prop="value" label="车辆状态" align="center">
         <template #default="{row}">
              <el-switch
                v-model="row.value"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="carStatsChange(row)"
              ></el-switch>
            </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="120">
        <template v-slot="scope">
          <el-button size="mini" type="text" @click="editTable(scope.row)">编辑</el-button>
          <el-button size="mini" type="text" @click="deleteTable(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
 <el-pagination background
                   layout="prev, pager, next, sizes, total, jumper"
                   :page-sizes="[5, 10, 15, 20]"
                    :page-size="pagesize"
                    :total="this.tableData.length"
                    @current-change="handleCurrentChange"
                   @size-change="handleSizeChange">
    </el-pagination>
     <!-- 添加或修改定时任务对话框 -->
    <el-dialog :title="title" :visible.sync="distributorOpen" width="780px" :before-close="handleClose" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="140px">
        <el-row>
          <p style="margin-left:20px;font-size:22px">车辆信息</p>
          <el-col :span="12">
            <el-form-item label="车牌号" prop="cronExpression">
               <el-input v-model="form.remark" placeholder="请输入车牌号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="型号" prop="misfirePolicy">
              <el-input v-model="form.remark" placeholder="请输入型号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="厂家" prop="concurrent">
               <el-input v-model="form.remark" placeholder="请输入厂家" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属配送商" prop="concurrent">
              <el-select v-model="form.value" placeholder="请选择所属配送商">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车厢容积(m³)" prop="concurrent">
               <el-input v-model="form.remark" placeholder="请输入车厢容积，格式：长*宽*高" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车厢载重（T）" prop="remark">
              <el-input-number v-model="form.num" :min="1"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="车辆图片" prop="concurrent">
               <el-upload
                class="avatar-uploader"
                action="string"
                :show-file-list="false"
                :http-request="uploadImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="form.picUrl" :src="form.picUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          
        </el-row>
        <el-row>
           <p style="margin-left:20px;font-size:22px">司机信息</p>
          <el-col :span="12">
            <el-form-item label="司机姓名" prop="concurrent">
               <el-input v-model="form.remark" placeholder="请输入司机姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式" prop="concurrent">
               <el-input v-model="form.remark" placeholder="请输入联系方式" />
            </el-form-item>
          </el-col>
          </el-row>
          <el-row>
           <p style="margin-left:20px;font-size:22px">GPS设备信息</p>
          <el-col :span="12">
            <el-form-item label="设备编码" prop="concurrent">
               <el-input v-model="form.remark" placeholder="请输入设备编码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="SIM卡号" prop="concurrent">
               <el-input v-model="form.remark" placeholder="请输入20位SIM卡号" />
            </el-form-item>
          </el-col>
          
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="submitLoading" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "vehicle-management",
  components: {},
  props: {},
  data() {
    return {
      title:"新建",
      pagesize: 10,
      currpage: 1,
      submitLoading:false,
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: '0',
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: '0',
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: '0',
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: '0',
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: '1',
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: '1',
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: '1',
        },
      ],
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
      distributorOpen:false,
      form:{

      },
      rules:{}
    };
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    handleClose(){

    },
    // 修改状态
    carStatsChange(row){
      console.log(row)
    },
    // 弹框取消
    cancel(){
      this.distributorOpen=false
    },
    // 上传图片方法
    uploadImage(param){
      const formData = new FormData()
      formData.append('file', param.file)
      // uploadAvatar(formData).then(response => {
      //   console.log('上传图片成功')
      //   this.form.picUrl = process.env.VUE_APP_BASE_API + response.imgUrl
      // }).catch(response => {
      //   console.log('图片上传失败')
      // })
    },
    // 资质照片上传前校验
    beforeAvatarUpload(file) {
      const isPic = file.type.indexOf('image') >= 0;
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isPic) {
        this.$message.error('资质照片只能为图片格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }
      return isPic && isLt2M;
    },
    // 弹框提交
    submitForm(){

    },
    addDistributor() {
      console.log('新建')
      this.distributorOpen=true
    },
    deleteTable(val) {
      console.log(val, '删除')
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      
    },
    editTable(val) {
      this.distributorOpen=true
      this.title='编辑'
    },
    
     // 切换页 方法
      handleCurrentChange(cpage) {
        this.currpage = cpage;
      },
      handleSizeChange(psize) {
        this.pagesize = psize;
      },
  },
};
</script>

<style scoped lang="scss">
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
